<script>
export default {
  created(){
    this.in_login()
  },
  data() {
    return {
      nav_text_list: [
        { text: '鲜花' },
        { text: '永生花' },
        { text: '蛋糕' },
        { text: '巧克力' },
      ],
      a_login:0,
      search_shop: '', // 搜索
    }
  },
  methods: {
    // 搜索时调用方法
    btn_search() {
      if(this.search_shop != '' && this.search_shop.length > 1 && this.search_shop != null){
        this.$router.push({path: "/item",query: {sear: this.search_shop}})
      }
    },
    // 检查是否登录
    in_login(){
      if(localStorage.getItem("userId")){
        this.a_login = 1
      }
    },
    // 退出登录
    quit(){
      localStorage.removeItem("userId")
      this.$router.push("/login")
    },
    // 根据不同的标签查询不同的商品
    select_goods(index){
      this.$router.push({path:"/item",query: {index: index}})
    }
  }
}
</script>
<template>
  <div class="app">
    <div style="height: 30px; width: 100%; background-color: #F3F5F7;">
      <div  class="heder_div">
        <a class="heder_div_a" href="#" v-if="a_login == 1" @click="quit()">欢迎：晚风</a>
        <a class="heder_div_a" href="/login" v-else>请登录/注册</a>
        <a class="heder_div_a" href="/shopping">购物车</a>
        <a style="float: right;" href="/order">订单</a>
      </div>
    </div>
    <header>
      <a href="/"><img src="../images/logo.png" class="img_logo" /></a>
      <input
        type="text"
        placeholder="请输入商品名称"
        v-model="search_shop"
        class="search_input"
      />
      <button class="search_btn" @click="btn_search()">搜索</button>

      <div>
        <img src="../images/dianhua.png" class="img_header" />
        <h3>0000-0000-0000-0000</h3>
      </div>
    </header>
    <div class="nav_title">
      <ul>
        <li
          v-for="(item, index) in nav_text_list"
          :key="item.text"
          :style="{ marginLeft: (index + 1) * 100 + 'px' }"
        >
          <a href="#">
            <h3 @click="select_goods(index)">{{ item.text }}</h3></a>
        </li>
      </ul>
    </div>
    <router-view :key="$route.fullPath"/>
  </div>
</template>
<style lang="less" scoped>
@import url('../css/header.less'); // 引入外部css文件
@import url('@/views/css/home.less');
</style>
